VisYang's Studio.

跨域解决方案 和 jQuery ajax 简单封装

ajax jQuery 跨域
2016/08/15

同源&跨域

同源

同源策略是浏览器的一种安全策略(ajax 不允许跨域获取数据)，所谓同源是指，域名，协议，端口完全相同。

跨域

1
2
3
4
5
6
7
http://api.example.com/detail.html  不同源 域名不同
https//www.example.com/detail.html   不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同  
http://api.example.com:8080/detail.html 不同源 域名、端口不同  
https://api.example.com/detail.html 不同源 协议、域名不同  
https://www.example.com:8080/detail.html    不同源 端口、协议不同  
http://www.example.com/detail/index.html    同源  只是目录不同

解决跨域获取数据的方案：

1、jsonp
2、Apache反向代理

jsonp

jsonp 原理：
利用script标签的src属性发送的请求可以跨域获取数据
比较方便的做法就是动态创建script标签，然后通过标签的src属性发送跨域请求，并且可以携带参数,后台响应的内容是js代码【函数调用】

1
2
3
4
5
var script = document.createElement('script');
var param = '?flag=123&callback=hello';
script.src = 'http://vis.com/data.php' + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

jQuery ajax方法

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
  url : 'http://vis.com/data.php',
  jsonp : 'abc',// 该属性的作用就是定制回调函数的key（等号左边的部分）
  jsonpCallback : 'helloworld',// 该属性的作用就是定制回调函数的value（等号后面的部分）
  dataType : 'jsonp',
  data : {flag:123},
  success : function(data){
    console.log(data);
  }
});
// http://vis.com/data.php?callback=jQuery1112025613064331916147_1505555830752&flag=123&_=1505555830753

模拟 jQuery 封装 ajax 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function ajax(obj){
  // 默认参数
  var defaults = {
    jsonp : 'callback'
  }
  // 覆盖默认参数
  for(var key in obj){
    defaults[key] = obj[key];
  }
  // 默认回调函数名称
  var cbName = 'jQuery' + ('v1.11.1' + Math.random()).replace(/\D/g,'') + '_' + new Date().getTime();
  if(defaults.jsonpCallback){
    cbName = defaults.jsonpCallback;
  }
  // 定义回调函数
  window[cbName] = function(data){
    defaults.success(data);
  }
  // 发送跨域请求
  var script = document.createElement('script');
  var param = '';
  if(defaults.data){
    for(var key in defaults.data){
      param += key + '=' + defaults.data[key] + '&';
    }
  }
  script.src = defaults.url + '?' + param + defaults.jsonp + '=' + cbName;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(script);
}
ajax({
  url : 'http://vis.com/data.php',
  jsonp : 'abc',
  jsonpCallback : 'hello',
  data : {flag : 123,uname : 'kitty'},
  dataType : 'jsonp',
  success : function(data){
    console.log(data.username);
  }
});

Apache反向代理

  • 步骤一：配置httpd.conf文件（134行和142行）

    1
    2
    LoadModule proxy_module modules/mod_proxy.so
    LoadModule proxy_http_module modules/mod_proxy_http.so

  • 步骤二：配置conf/extra/httpd-vhosts.conf文件

    1
    2
    3
    4
    5
    6
    7
    8
    <VirtualHost *:80>
        DocumentRoot "本地项目地址"
        #本地域名
        ServerName vis.com
        ServerAlias www.vis.com
        #反向代理设置
        ProxyPass /代理名 代理域名
    </VirtualHost>

在ajax交互时url改成 url : ‘/代理名/访问对象’,

CATALOG
  1. 1. 同源&跨域
    1. 1.1. 同源
    2. 1.2. 跨域
  2. 2. 解决跨域获取数据的方案：
    1. 2.1. jsonp
    2. 2.2. Apache反向代理
Archive Tag
Total : 17
2016
2015
demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack